import { Breadcrumb, Button } from 'antd';
import { useState, memo, useEffect } from 'react';
import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
import { RightOutlined } from '@ant-design/icons';
import { DatasetListItem } from '@/common';

interface Props {
  disable: boolean;
  crumbs: ItemType[];
  onItemClicked?: (item: ItemType | undefined) => void;
}

const BreadCrumb = ({ disable = false, crumbs, onItemClicked }: Props) => {
  const [breadCrumbs, setBreadCrumbs] = useState<ItemType[]>([{
    title: "角色管理",
    key: -1
  }]);
  const onClick = (item: any) => {
    onItemClicked && onItemClicked(item);
  }

  useEffect(() => {
    const items = crumbs?.map((item, index) => {
      return {
        title: <Button type='text' onClick={() => { onClick(item) }}>{item.title?.toString()}</Button>,
        item: item,
        key: index
      }
    })

    items.unshift({
      title: <Button type='text' onClick={() => { onClick(undefined) }}>角色管理</Button>,
      item: {},
      key: -1
    });

    setBreadCrumbs(items);
  }, [crumbs]);
  return (
    <div className={`bread-crumb w-full rounded-xl items-center flex bg-[#F5F7FB] ${disable? 'breadcrumb-disabled': ''}`}>
      <Breadcrumb
        items={breadCrumbs}
        style={{ fontSize: "16px", marginLeft: '10px', marginTop: '5px', marginBottom:'5px' }}
        separator={<RightOutlined size={16}/>}
      />
    </div>
  );
}

export default memo(BreadCrumb)
